import * as echarts from '../components/ec-canvas/echarts.min';
// 初始化可视化图表
// 折线图
export function initLine(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);
  var option = {
    title: {
      text: '最近7天的收支明细',
      left: 'center'
    },
    legend: {
      data: ['收入', '支出', '余额'],
      top: 50,
      left: 'center',
      // backgroundColor: '#60BBFF',
      z: 100
    },
    grid: {
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      // show: false
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
      // show: false
    },
    series: [{
      name: '收入',
      type: 'line',
      smooth: true,
      data: [18, 36, 65, 30, 78, 40, 33],
      color: "#00B26A"
    }, {
      name: '支出',
      type: 'line',
      smooth: true,
      data: [12, 50, 51, 35, 70, 30, 20],
      color: "#CF4A34"
    }, {
      name: '余额',
      type: 'line',
      smooth: true,
      data: [10, 30, 31, 50, 40, 20, 10],
      color: "#FAC858"
    }]
  };

  chart.setOption(option);
  return chart;
}

// 饼状图
export function initPie(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
    backgroundColor: "#ffffff",
    series: [{
      label: {
        normal: {
          fontSize: 14
        }
      },
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['20%', '40%'],
      data: [{
        value: 55,
        name: '北京'
      }, {
        value: 20,
        name: '武汉'
      }, {
        value: 10,
        name: '杭州'
      }, {
        value: 20,
        name: '广州'
      }, {
        value: 38,
        name: '上海'
      }]
    }]
  };

  chart.setOption(option);
  return chart;
}

// 柱状图
export function initBar(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  // 自定义配置柱状图
  let option = {
    xAxis: {
      type: 'category',
      data: [
        '05/23',
        '05/24',
        '05/25',
        '05/26',
        '05/27',
        '05/28',
        '05/29'
      ]
    },
    yAxis: {
      type: 'value'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    series: [{
      data: [{
          value: 120,
          itemStyle: {
            color: '#CF4A34'
          }
        },
        {
          value: 200,
          itemStyle: {
            color: '#00B26A'
          }
        },
        {
          value: 200,
          itemStyle: {
            color: '#0884D9'
          }
        },
        {
          value: 80,
          itemStyle: {
            color: '#5470C6'
          }
        },
        {
          value: 70,
          itemStyle: {
            color: '#91CC75'
          }
        },
        {
          value: 200,
          itemStyle: {
            color: '#FAC858'
          }
        },
        {
          value: 130,
          itemStyle: {
            color: '#549FEF'
          }
        },
      ],
      type: 'bar'
    }]
  };

  chart.setOption(option);
  return chart;
}


// 柱状图
export function initBar2(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  // 自定义配置柱状图
  let option = {
    title: {
      text: '收支明细'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01]
    },
    yAxis: {
      type: 'category',
      data: ['05/29', '05/28', '05/27', '05/26', '05/25', '05/24']
    },
    series: [{
        name: '收入',
        type: 'bar',
        data: [200, 300, 400, 500, 800, 900]
      },
      {
        name: '支出',
        type: 'bar',
        data: [100, 200, 300, 300, 600, 400]
      },
      {
        name: '剩余',
        type: 'bar',
        data: [100, 100, 100, 200, 200, 500]
      }
    ]
  };

  chart.setOption(option);
  return chart;
}


// 格式化日期
const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : `0${n}`
}
function formatdate(date){
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  // return `${[year, month, day].map(formatNumber).join('/')}`
  return `${year}/${formatNumber(month)}/${formatNumber(day)}`
}
// console.log("测试:",formatdate(new Date));
// 获取最近7天的日期
export function get7Day() {
  // 获取当前日期
  let today = new Date();
  // 初始化最近7天的日期数组
  let dates = [];
  for (let i = 6; i >= 0; i--) {
    // 计算日期差值，向前推算日期
    let diff = new Date(today.getTime() - i * 24 * 60 * 60 * 1000);
    // 将日期加入数组
    dates.push(formatdate(diff));
  }
  // 返回7天的日期
  return dates;
}